<template>
  <div class="movie-details">
    <!-- 背景图 -->
    <div
      class="movie-details__backdrop"
      :style="{ backgroundImage: `url(${getBackdropUrl(movie.backdrop_path)})` }"
    ></div>
    <!-- 内容区域 -->
    <div class="movie-details__content">
      <div class="movie-details__info">
        <div class="info_left">
          <h1>{{ movie.title }}</h1>
          <a-button type="primary" style="width: 200px" size="large" block>播放</a-button>
        </div>
        <div class="info_right">
          <p class="movie-details__tagline">{{ movie.tagline }}</p>
          <a-space>
            <span class="movie-details__rating">评分: {{ movie.vote_average }} </span>
            <span class="movie-details__release-date"> {{ movie.release_date }}</span>
            <span v-for="id in movie.genre_ids" :key="id">{{ genres[id] }}</span>
          </a-space>
          <p class="movie-details__overview">{{ movie.overview }}</p>
        </div>
      </div>
    </div>
    <div>
      <h2 style="color: black;">演员表</h2>
      <div class="movie-details__cast">
        <div v-for="actor in credits" :key="actor.id" class="actor-card">
          <img :src="getPosterUrl(actor.profile_path)" :alt="actor.name" />
          <p>{{ actor.name }}</p>
          <!-- <p>{{ actor.character }}</p> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { genres } from '@/utils/data'
import API from '@/api'

const movie = ref({})
const route = useRoute()

// 获取电影详情
const getMovieDetail = async () => {
  API.getMovieDetail(route.query.id).then((res) => {
    if (res[0]) {
      // 处理数据
      res[0].genre_ids = res[0].genre_ids.split(',')
    } else {
      // 处理错误
      console.error('Error fetching movie details:', res)
    }
    movie.value = res[0] || {}
    console.log('res >>>>>:', movie.value.genre_ids)
  })
  API.getMovieFiles(route.query.id).then((res) => {
    console.log('getMovieFiles >>>>>:', res)
  })
}

// 获取电影海报的完整 URL
const getPosterUrl = (path) => `https://image.tmdb.org/t/p/w500${path}`

// 获取背景图的完整 URL
const getBackdropUrl = (path) => `https://image.tmdb.org/t/p/original${path}`
const credits = ref([])
// 获取演员列表
const getMovieCredits = async () => {
  API.getCredits({media_type:'movie',media_id:route.query.id}).then((res) => {
    credits.value = res
  })
}
onMounted(() => {
  getMovieDetail()
  getMovieCredits()
})
</script>

<style lang="less" scoped>
.movie-details {
  //   border: 1px solid red;
  position: relative;
  color: #fff;
  height: 100%;
  overflow: scroll;
  &__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: 0 0;
    filter: brightness(0.4);
    z-index: 0 !important;
  }
  &__content {
    position: relative;
    bottom: 10px;
    padding: 20px;
    z-index: 99;
    height: 500px;
  }

  &__poster {
    flex-shrink: 0;
    width: 300px;
    img {
      width: 100%;
      border-radius: 10px;
      object-fit: cover;
    }
  }

  &__info {
    // flex: 1;
    position: absolute;
    bottom: 0;
    display: flex;

    .info_left {
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px 0;
        // border: 1px solid #fff;
    }
    .info_right {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-left: 20px;
    }
    h1 {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .movie-details__tagline {
      font-size: 18px;
      font-style: italic;
      color: #ccc;
      margin-bottom: 10px;
    }

    .movie-details__rating {
      font-size: 18px;
      color: #f39c12;
      margin-bottom: 10px;
    }

    .movie-details__release-date,
    .movie-details__genres {
      font-size: 16px;
      color: #ddd;
      margin-bottom: 10px;
    }

    .movie-details__overview {
      font-size: 16px;
      line-height: 1.6;
      color: #fff;
    }
  }
  .movie-details__cast {
   width: 100%;
   height: 280px;
   white-space: nowrap;
    margin-top: 20px;
    // padding: 20px 0;
    color: black;
    overflow-x: auto;
    .actor-card {
      display: inline-block;
      width: 150px;
      text-align: center;
      // border: 1px solid red;
      margin-right: 20px;
      img {
        width: 100%;
        border-radius: 10px;
        object-fit: cover;
      }
      p {
        margin-top: 5px;
        font-size: 14px;
        // color: #ddd;
      }
    }
  }
}
</style>
